<template lang="pug">
  el-drawer.commonDrawer(
    title="评分"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="840px"
    @close="$_handleCancel"
  )
    .drawer-content
      .userBox
        user-box(:headUrl="info.headImgUrl" :name="info.realName" :tag="info.positionName")
      div.m
        form-box(
          ref="scoreForm"
          :fields="scoreFields"
          :showBtns="false"
          size="small"
          :layoutCol="{ xs: 24, md: 24, lg: 24 }"
          labelWidth="96px"
        )
          template(slot="form-tags")
            el-tag(
              :key="tag"
              v-for="tag in tags.dynamicTags"
              closable
              class="tag"
              :disable-transitions="false"
              @close="handleTagClose(tag)"
            ) {{tag}}
            el-input(
              class="input-new-tag"
              v-if="tags.inputVisible"
              v-model="tags.inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleTagInputConfirm"
              @blur="handleTagInputConfirm"
            )
            el-button(v-else class="button-new-tag" size="small" @click="showTagInput") + 增加标签
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 确认评分
</template>
<script>
import UserBox from '@/components/Business/UserBox'
import { getScoreList, submitScore } from '../../api'

export default {
  components: {
    UserBox
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      submitting: false,
      list: [],
      tags: {
        dynamicTags: [],
        inputVisible: false,
        inputValue: ''
      }
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    scoreFields () {
      return [
        {
          key: 'tags',
          label: '标签',
          type: 'slot'
        },
        {
          key: 'rankVal',
          label: '评分',
          type: 'rate'
        },
        {
          key: 'content',
          label: '评语',
          type: 'textarea'
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if (this.id && val) {
        this.getScoreList()
      }
    }
  },
  methods: {
    getScoreList () {
      this.loading = true
      getScoreList({ staffId: this.id }).then(res => {
        this.list = res.content || []
        this.tags = {
          dynamicTags: [],
          inputVisible: false,
          inputValue: ''
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleTagClose (tag) {
      const { tags } = this
      tags.dynamicTags.splice(tags.dynamicTags.indexOf(tag), 1)
      this.tags = { ...tags }
    },
    showTagInput () {
      const { tags } = this
      tags.inputVisible = true
      this.tags = { ...tags }
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleTagInputConfirm () {
      const { tags } = this
      const inputValue = tags.inputValue
      if (inputValue) {
        tags.dynamicTags.push(inputValue)
      }
      tags.inputVisible = false
      tags.inputValue = ''
      this.tags = { ...tags }
    },
    // 提交评分
    submitHandle () {
      const { id, tags } = this
      const that = this
      this.$confirm('您确认评分完成了吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const values = await that.$refs.scoreForm.submitForm()
        const params = {
          ...values,
          staffId: id,
          tags: tags.dynamicTags.join('|')
        }
        submitScore(params).then(() => {
          that.$message.success('提交成功')
          // that.$emit('getList')
          that.$_handleCancel()
        })
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.userBox{
  margin: 0 20px 30px;
  position: relative
}
.tag {

  + .tag, + .button-new-tag , + .input-new-tag {
    margin-left: 10px;
  }
}
.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  vertical-align: bottom;
}
.m{
  margin-left: 102px;
}
</style>
